<template>
  <view>
    <u-navbar back-icon-size="34" title-size="36" :border-bottom="false" :background="background" title-color="#333" back-icon-color="#333">
      <u-search placeholder="搜索" v-model="keyword" :show-action="false" style="margin-right: 39rpx" @blur="blur"></u-search>
    </u-navbar>
    <view class="">
      <u-tabs :list="list" :is-scroll="false" :current="current" @change="change" active-color="#E50014" inactive-color="#606266" :show-bar="false"></u-tabs>
    </view>
    <scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }" @scrolltolower="getList">
      <!-- 订单 -->
      <view class="" style="margin: 20rpx 28rpx; background: #fff; border-radius: 20rpx" v-for="(i, k) in getlist" :key="k">
        <view class="" style="padding: 19rpx 17rpx; display: flex; align-items: center; justify-content: space-between">
          <view class="" style="font-size: 30rpx; display: flex; align-items: center">
            <view class="" style="width: 36rpx; height: 36rpx">
              <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z4.png" mode="aspectFill" style="width: 36rpx; height: 36rpx"></image>
            </view>

            <view class="" style="margin-left: 17rpx">
              {{ i.shop_name }}
            </view>
          </view>

          <view class="" style="font-size: 26rpx; color: #e50014; text-align: right">
            {{ i.order_status_text }}
          </view>
        </view>

        <view
          class=""
          style="display: flex; align-items: center; justify-content: space-between; padding-top: 15rpx"
          @tap="uis(i.order_id)"
          v-for="(m, n) in i.order_goods"
          :key="n"
        >
          <view class="" style="display: flex; align-items: center; padding-left: 15rpx">
            <image :src="img_url + m.specs_image" mode="aspectFill" style="width: 176rpx; height: 176rpx; border-radius: 20rpx"></image>
            <view class="" style="" style="padding-left: 12rpx">
              <view class="" style="width: 350rpx; font-size: 28rpx">
                {{ m.goods_name }}
              </view>
              <view class="" style="font-size: 26rpx; color: #666; padding-top: 30rpx">
                {{ m.specs_name }}
              </view>
            </view>
          </view>
          <view class="" style="padding-right: 15rpx">
            <view class="" style="font-size: 26rpx">￥{{ m.specs_price }}</view>
            <view class="" style="font-size: 26rpx; text-align: right; padding-top: 70rpx">x{{ m.goods_num }}</view>
          </view>
        </view>
        <!-- 总计 -->
        <view class="" style="font-size: 26rpx; text-align: right; padding: 31rpx 18rpx">
          <text style="color: #999999">总价￥{{ i.order_amount }}</text>
          <text style="color: #999999; padding: 0 15rpx">优惠￥{{ i.discount_amount }}</text>
          <text>实付款￥{{ i.pay_amount }}</text>
        </view>
        <!-- 按钮 -->
        <view class="">
          <view class="" v-if="i.order_status == 2" style="display: flex; align-items: center; padding: 25rpx 20rpx; justify-content: space-between">
            <view class="btn" @tap="(show = true), (id = i.order_id)">取消订单</view>
            <view class="btn1" @tap="edit(i.order_id)">修改地址</view>
          </view>

          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 25rpx 20rpx" v-if="i.order_status == 1">
            <view class="btn" @tap="(show = true), (id = i.order_id)">取消订单</view>
            <view class="" style="display: flex; align-items: center; justify-content: space-between">
              <view class="btn" @tap="edit(i.order_id)">修改地址</view>
              <view class="btn1" style="margin-left: 22rpx" @tap="pay(i.order_id, i.pay_amount)">立即付款</view>
            </view>
          </view>

          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 25rpx 20rpx" v-if="i.order_status == 3">
            <view class=""></view>
            <!-- <view class="btn" @tap="show=true,id=i.order_id">
						取消订单
					</view> -->
            <view class="" style="display: flex; align-items: center; justify-content: space-between">
              <view class="btn" @tap="lookwl(i.order_id)">查看物流</view>
              <view class="btn1" style="margin-left: 22rpx" @tap="take(i.order_id)">确认收货</view>
            </view>
          </view>
          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 25rpx 20rpx" v-if="i.order_status == 4 && i.is_evaluate == 0">
            <!-- <view class="btn" @tap="shou(i)">
						申请售后
					</view> -->
            <view class=""></view>
            <view class="" style="display: flex; align-items: center; justify-content: space-between">
              <view class="btn" @tap="lookwl(i.order_id)">查看物流</view>

              <view class="btn1" style="margin-left: 22rpx" @tap="pj(i)">评价</view>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <u-modal v-model="show" :content="content" :show-cancel-button="true" confirm-color="#E50014" @confirm="confirm"></u-modal>
    <u-popup v-model="show1" mode="bottom" border-radius="20">
      <view style="font-size: 30rpx; text-align: center; padding-top: 39rpx">选择申请售后商品</view>
      <view class="">
        <view class="" style="display: flex; align-items: center; font-size: 30rpx; padding-top: 39rpx; padding-left: 20rpx">
          <image src="https://wenzhen.jiangkukeji360.com/static/shop/user/z4.png" mode="" style="width: 36rpx; height: 36rpx"></image>
          <view class="" style="padding-left: 17rpx">
            {{ i_list.shop_name }}
          </view>
        </view>
        <view class="" v-for="(i, k) in i_list.order_goods" :key="k" @tap="i_current = k">
          <view class="" style="display: flex; align-items: center; justify-content: space-between; padding: 63rpx 21rpx">
            <view class="" style="display: flex; align-items: center; padding-left: 15rpx">
              <radio :checked="i_current == k" style="transform: scale(0.7)" color="#FF6572"></radio>
              <image :src="img_url + i.specs_image" mode="aspectFill" style="width: 150rpx; height: 150rpx; border-radius: 20rpx"></image>
              <view class="" style="" style="padding-left: 12rpx">
                <view class="" style="width: 350rpx; font-size: 28rpx">
                  {{ i.goods_name }}
                </view>
                <view class="" style="font-size: 26rpx; color: #666; padding-top: 30rpx">
                  {{ i.specs_name }}
                </view>
              </view>
            </view>
            <view class="" style="padding-right: 15rpx">
              <view class="" style="font-size: 26rpx">￥{{ i.specs_price }}</view>
              <view class="" style="font-size: 26rpx; text-align: right; padding-top: 70rpx">x{{ i.goods_num }}</view>
            </view>
          </view>
        </view>
      </view>
      <view class="" style="display: flex; justify-content: flex-end">
        <view
          class=""
          style="
            width: 200rpx;
            text-align: center;
            line-height: 66rpx;
            font-size: 28rpx;
            color: #fff;
            height: 66rpx;
            background: linear-gradient(0deg, #e50014 0%, #ff6572 100%);
            border-radius: 33rpx;
            margin-right: 29rpx;
            margin-bottom: 37rpx;
          "
          @tap="cim"
        >
          确认
        </view>
      </view>
    </u-popup>
  </view>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      background: {
        background: '#fff'
      },
      keyword: '',
      list: [
        {
          name: '全部'
        },
        {
          name: '待付款'
        },
        {
          name: '待发货'
        },
        {
          name: '待收货'
        },
        {
          name: '待评价'
        }
      ],
      current: 0,
      show: false,
      show1: false,
      content: '你确认取消该订单吗？',
      radio: true,
      getlist: [],
      page: 1,
      boxHeight: '',
      id: null,
      i_list: {},
      i_current: 0
    };
  },
  onReady() {
    this.box();
  },
  onShow() {
    this.getList(1);
  },
  //方法
  methods: {
    shou(e) {
      this.i_list = e;
      this.show1 = true;
      console.log(this.i_list);
    },
    blur() {
      this.api({
        url: '/api//shop/getOrderList',
        method: 'post',
        data: {
          goods_name: this.keyword
        }
      }).then((res) => {
        this.getlist = res.data;
      });
    },
    take(e) {
      this.api({
        url: '/api//shop/orderStatus',
        method: 'post',
        data: {
          order_id: e,
          type: 3
        }
      }).then((res) => {
        this.getList(1);
      });
    },
    lookwl(e) {
      uni.navigateTo({
        url: '/shop/lookwl/lookwl?id=' + e
      });
    },
    pay(e, a) {
      uni.navigateTo({
        url: '/shop/cash/cash?id=' + e + '&pic=' + a
      });
    },
    edit(e) {
      uni.navigateTo({
        url: '/shop/address/address?id=' + e
      });
    },
    confirm() {
      uni.navigateTo({
        url: '/shop/cancel/cancel?id=' + this.id
      });
    },
    box() {
      const query = uni.createSelectorQuery().in(this);
      query
        .select('#box')
        .boundingClientRect((data) => {
          this.boxHeight = this.screenHeight - data.top - 50;
        })
        .exec();
    },
    change(index) {
      this.current = index;
      this.getList(1);
    },
    uis(e) {
      uni.navigateTo({
        url: '/shop/orderdetail/orderdetail?id=' + e
      });
    },
    pj(e) {
      console.log(e);
      uni.navigateTo({
        url: '/shop/issue/issue?type=' + JSON.stringify(e)
      });
    },
    cim() {
      uni.navigateTo({
        url: 'after'
      });
    },
    getList(e) {
      if (e == 1) {
        this.getlist = [];
        this.page = 1;
      }
      this.api({
        url: '/api//shop/getOrderList',
        method: 'post',
        data: {
          page: this.page,
          order_status: this.current
        }
      }).then((res) => {
        this.getlist = this.getlist.concat(res.data);
        this.page++;
      });
    }
  },
  //首页渲染
  onLoad(op) {
    if (op.type == 0) {
      this.current = 1;
    } else if (op.type == 1) {
      this.current = 2;
    } else if (op.type == 2) {
      this.current = 3;
    } else if (op.type == 3) {
      this.current = 4;
    } else {
      this.current = 0;
    }
  },
  //监听
  watch: {},
  //计算属性
  computed: {}
};
</script>

<style lang="scss" scoped>
page {
  background: #f8f8f8;
}

.btn {
  width: 168rpx;
  height: 62rpx;
  background: #ffffff;
  border: 1rpx solid #999999;
  border-radius: 31rpx;
  line-height: 62rpx;
  color: #666666;
  font-size: 28rpx;
  text-align: center;
}

.btn1 {
  width: 168rpx;
  height: 62rpx;
  background: #ffffff;
  border: 1rpx solid #e50014;
  border-radius: 31rpx;
  line-height: 62rpx;
  color: #e50014;
  font-size: 28rpx;
  text-align: center;
}
</style>
